<template>
  <el-select
    style="width: 100%;"
    v-model="val"
    placeholder="请选择"
    @change="change"
    :disabled="$attrs.disabled"
    :ref="$attrs.dictCode"
    filterable
    :multiple="$attrs.multiple || false"
  >
    <el-option
      v-for="(item, index) in options"
      :key="index"
      :label="item.MC"
      :value="item.ID"
    ></el-option>
  </el-select>
</template>
<script>
import { getDictByBzdm } from '@/api/common.js';
export default {
  props: {
    value: {
      type: [ String, Number ],
      default () {
        if (this.$attrs.multiple) {
          return []
        }
        return ''
      }
    }
  },
  data () {
    return {
      options: [],
      val: ''
    }
  },
  watch: {
    value (val) {
      this.val = val;
    },
    // options: {
    //   handler: function (val, oldVal) {
    //     console.log(val, oldVal, this.dictCode);
    //   },
    //   deep: true
    // }
  },
  mounted () {
    this.val = this.value;
    this.getSyncData();
  },
  methods: {
    /**
     * @name getSyncData
     * @description 获取远程数据
     * @author cjs1992
     * @date 2019-11-06 11:29:01
     */
    async getSyncData () {
      const bzdm = this.$attrs.dictCode;
      const res = await getDictByBzdm({
        bzdm
      });
      this.options = res.data || [];
    },
    /**
     * @name change
     * @description 
     * @author cjs1992
     * @date 2019-11-06 14:10:53
     */
    change (val) {
      this.$emit('input', val);
    }
  }
}
</script>